<template>
	<div>
		<el-input style="width: 300px;margin-bottom: 10px;" placeholder="请输入要查看的地区,点击回车键"
			suffix-icon="el-icon-search" v-model="search_area"
			@change="handleSearch(search_area)">
		</el-input>
		<el-button style="margin-left: 10px;" @click="cancelSelectArea">取消选择</el-button>
		<el-table :data="areas_data" row-key="id" border ref="areasFilter"
			:header-cell-style="{background:'#ccc', color: '#003366'}"
			:tree-props="{children: 'children'}" max-height="620" default-expand-all>
			<el-table-column prop="title" label="省份 (社区)">
				<template #default="scope">
					<span>{{scope.row.title}}</span>
					<span :style="{'color' : (scope.row.is_community == '1' ? 'green' : 'red')}"
						style="margin-left: 10px;">({{scope.row.is_community == "1" ? "是" : "否" }})</span>
				</template>
			</el-table-column>
			<el-table-column prop="id" label="ID">
			</el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<div v-if="scope.row.is_community == '1'">
						<el-radio v-model="c_area_id" :label="scope.row.id"
							@change="selectRadioArea">选择</el-radio>
					</div>
					<div v-else style="color: red;">
						不是社区，不能选择，默认参数为0
					</div>
				</template>
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	
	export default {
		data() {
			return {
				areas_data: [], // 获取社区
				search_area: '', // 搜索社区名
				c_area_id: this.areaId, // 社区id
			}
		},
		props: ['area_id'],
		watch: {
			area_id(val) {
				this.c_area_id = val;
				if(this.c_area_id == 0) {
					this.search_area = '';
				}
			}
		},
		mounted() {
			this.getAreas();
		},
		methods: {
			// 获取社区
			getAreas() {
				let self = this;
				API.areas(1, 10).then(res => {
					let data = res.data;
					self.$notify({
						message: '获取社区成功'
					});
					self.areas_data = data.data;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
			// 选中的社区
			selectRadioArea(val) {
				let self = this;
				self.$emit('getAreaId', {
					area_id: val
				});
			},
			// 取消选择
			cancelSelectArea() {
				let self = this;
				self.c_area_id = '0';
				self.$emit('getAreaId', {
					area_id: self.c_area_id
				});
			},
			// 搜索社区名
			handleSearch() {
				let self = this;
				self.loading = true;
				API.areas(1, 10, '', self.search_area).then(res => {
					let data = res.data;
					self.areas_data = data.data;
				}).catch(err => {
					self.$message.error(err.response.data.message)
				});
			},
		}
	}
</script>

<style>
</style>
